<template>
  <div class="search-interviews-container">
    <div class="header">
      <h1>发现机会</h1>
      <p>浏览所有开放的职位，找到您心仪的机会。</p>
    </div>
    
    <div class="search-bar">
          <el-input 
            v-model="searchQuery" 
        placeholder="搜索职位名称、公司或技能..."
            size="large"
        clearable
      >
        <template #prepend>
            <el-icon><Search /></el-icon>
        </template>
      </el-input>
      <el-button type="primary" size="large" @click="fetchJobPostings">搜索</el-button>
      </div>
      
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="5" animated v-for="n in 6" :key="n" />
    </div>
    
    <div v-else-if="filteredPostings.length > 0" class="postings-grid">
      <el-card v-for="posting in filteredPostings" :key="posting.id" class="posting-card">
        <template #header>
          <div class="card-header">
            <span class="posting-title">{{ posting.title }}</span>
            <el-tag :type="posting.is_active ? 'success' : 'info'">
              {{ posting.is_active ? '招聘中' : '已关闭' }}
              </el-tag>
          </div>
        </template>
        <div class="posting-content">
          <div class="job-meta">
            <div class="meta-row">
              <el-icon><OfficeBuilding /></el-icon>
              <span>{{ posting.department || '未知部门' }}</span>
              <el-divider direction="vertical" />
              <el-icon><Location /></el-icon>
              <span>{{ posting.location || '未知地点' }}</span>
            </div>
            <div class="meta-row">
              <el-tag size="small" :type="getEmploymentTypeColor(posting.employment_type)">
                {{ getEmploymentTypeText(posting.employment_type) }}
              </el-tag>
              <span class="salary">{{ posting.salary_range || '薪资面议' }}</span>
            </div>
          </div>
          
          <p class="description">{{ truncate(posting.description, 120) }}</p>
          
          <div class="requirements-preview">
            <div class="requirement-item" v-if="posting.education">
              <el-icon><Reading /></el-icon>
              <span>{{ posting.education }}</span>
            </div>
            <div class="requirement-item" v-if="posting.working_experience">
              <el-icon><Timer /></el-icon>
              <span>{{ posting.working_experience }}</span>
            </div>
          </div>
          
          <div class="skills-preview" v-if="posting.requirements_skills">
            <el-tag size="small" v-for="skill in getSkillsPreview(posting.requirements_skills)" :key="skill">
              {{ skill }}
            </el-tag>
          </div>
        </div>
        <template #footer>
          <div class="card-footer">
            <span class="date">发布于 {{ new Date(posting.created_at).toLocaleDateString() }}</span>
            <div class="footer-actions">
              <el-button type="primary" plain @click="viewDetails(posting.id)">查看详情</el-button>
              <el-button 
                v-if="!posting.has_applied" 
                type="success" 
                @click="showApplyDialog(posting)"
              >
                投递简历
              </el-button>
              <el-tag v-else type="info">已投递</el-tag>
            </div>
          </div>
        </template>
      </el-card>
    </div>
    
    <div v-else class="no-results">
      <el-empty description="未找到相关职位" />
    </div>
    
    <!-- 简历投递对话框 -->
    <el-dialog
      v-model="applyDialogVisible"
      title="投递简历"
      width="500px"
      :close-on-click-modal="false"
    >
      <div class="apply-form">
        <div class="job-info">
          <h4>{{ selectedJob?.title }}</h4>
          <p>{{ selectedJob?.description }}</p>
        </div>
        
        <el-form :model="applyForm" label-width="100px">
          <el-form-item label="简历文件" required>
            <el-upload
              ref="uploadRef"
              :auto-upload="false"
              :on-change="handleFileChange"
              :before-upload="beforeUpload"
              accept=".pdf"
              :limit="1"
              :file-list="fileList"
            >
              <el-button type="primary">选择PDF文件</el-button>
              <template #tip>
                <div class="el-upload__tip">
                  只能上传PDF文件，且不超过10MB
                </div>
              </template>
            </el-upload>
          </el-form-item>
          
          <el-form-item label="匹配度要求">
            <div class="match-score-display">
              <span class="score-value">{{ (selectedJob?.required_match_score || 0.6) * 100 }}%</span>
              <span class="score-desc">（由HR设置）</span>
            </div>
          </el-form-item>
        </el-form>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="applyDialogVisible = false">取消</el-button>
          <el-button 
            type="primary" 
            @click="submitApplication"
            :loading="submitting"
            :disabled="!applyForm.resumeFile"
          >
            确认投递
          </el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 职位详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="职位详情"
      width="600px"
      :close-on-click-modal="false"
    >
      <div v-if="loadingDetail" class="detail-loading">
        <el-skeleton :rows="8" animated />
      </div>
      
      <div v-else-if="jobDetail" class="job-detail">
        <div class="detail-header">
          <h2>{{ jobDetail.title }}</h2>
          <div class="detail-meta">
            <el-tag type="success" v-if="!jobDetail.has_applied">招聘中</el-tag>
            <el-tag type="info" v-else>已投递</el-tag>
            <span class="company-name">{{ jobDetail.created_by }}</span>
            <span class="apply-count">{{ jobDetail.application_count }} 人申请</span>
          </div>
        </div>
        
        <div class="detail-content">
          <div class="section">
            <h3>职位描述</h3>
            <div class="description" v-html="jobDetail.description.replace(/\n/g, '<br>')"></div>
          </div>
          
          <div class="section" v-if="jobDetail.interview_template">
            <h3>面试流程</h3>
            <div class="interview-template">
              <div class="template-header">
                <h4>{{ jobDetail.interview_template.title }}</h4>
                <div class="template-meta">
                  <span>预计时长：{{ jobDetail.interview_template.estimated_duration }} 分钟</span>
                  <span>总题数：{{ jobDetail.interview_template.total_questions }}</span>
                </div>
              </div>
              
              <div class="stages" v-if="jobDetail.interview_template.stages">
                <div 
                  v-for="(stage, index) in jobDetail.interview_template.stages" 
                  :key="stage.id"
                  class="stage-item"
                >
                  <div class="stage-number">{{ index + 1 }}</div>
                  <div class="stage-content">
                    <h5>{{ stage.name }}</h5>
                    <p>{{ stage.description }}</p>
                    <div v-if="stage.question_count" class="question-count">
                      题目数量：{{ stage.question_count }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
          <el-button 
            v-if="jobDetail && !jobDetail.has_applied" 
            type="success" 
            @click="showApplyDialog(jobDetail)"
          >
            投递简历
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 简历分析进度对话框 -->
    <el-dialog
      v-model="progressDialogVisible"
      title="简历分析进度"
      width="400px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div class="progress-content">
        <el-progress 
          :percentage="progressPercent" 
          :stroke-width="8"
          :show-text="false"
          color="#409EFF"
        />
        <p class="progress-text">{{ progressText }}</p>
        <p class="progress-tip">AI正在深度分析您的简历，这通常需要30秒左右，请耐心等待...</p>
      </div>
    </el-dialog>

    <!-- 筛选反馈对话框 -->
    <el-dialog
      v-model="screeningFeedbackVisible"
      title="简历筛选结果"
      width="600px"
      :close-on-click-modal="false"
    >
      <div v-if="screeningResult" class="screening-feedback">
        <div class="result-header">
          <el-alert
            :title="`匹配度: ${screeningResult.match_score}% (要求: ${screeningResult.threshold_score}%)`"
            type="warning"
            :closable="false"
            show-icon
          >
            <template #default>
              <p>{{ screeningResult.message }}</p>
            </template>
          </el-alert>
        </div>

        <div class="feedback-sections">
          <div class="feedback-section">
            <h4>📊 详细评分</h4>
            <div class="feedback-items">
              <div v-for="item in screeningResult.feedback" :key="item.dimension" class="feedback-item">
                <div class="feedback-header">
                  <span class="dimension">{{ item.dimension }}</span>
                  <span class="score">{{ item.score }}/{{ item.max_score }}</span>
                </div>
                <div class="feedback-comment">{{ item.comments }}</div>
                <el-progress 
                  :percentage="(item.score / item.max_score) * 100" 
                  :color="getScoreColor((item.score / item.max_score) * 100)"
                  :stroke-width="6"
                />
              </div>
            </div>
          </div>

          <div class="feedback-section">
            <h4>💡 改进建议</h4>
            <ul class="suggestions-list">
              <li v-for="suggestion in screeningResult.suggestions" :key="suggestion">
                {{ suggestion }}
              </li>
            </ul>
          </div>

          <div class="feedback-section" v-if="screeningResult.core_skills_matched?.length > 0">
            <h4>✅ 已匹配技能</h4>
            <div class="skills-tags">
              <el-tag v-for="skill in screeningResult.core_skills_matched" :key="skill" type="success">
                {{ skill }}
              </el-tag>
            </div>
          </div>

          <div class="feedback-section" v-if="screeningResult.soft_skills_detected?.length > 0">
            <h4>🌟 检测到的软技能</h4>
            <div class="skills-tags">
              <el-tag v-for="skill in screeningResult.soft_skills_detected" :key="skill" type="primary">
                {{ skill }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="screeningFeedbackVisible = false">关闭</el-button>
          <el-button type="primary" @click="goToMyApplications">查看我的申请</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { Search, OfficeBuilding, Document, Location, Reading, Timer } from '@element-plus/icons-vue';
import { candidateApi } from '@/services/api';

const router = useRouter();
const postings = ref([]);
const loading = ref(true);
const searchQuery = ref('');

// 简历投递相关
const applyDialogVisible = ref(false);
const selectedJob = ref(null);
const submitting = ref(false);
const fileList = ref([]);
const applyForm = ref({
  resumeFile: null
});

// 详情弹窗相关
const detailDialogVisible = ref(false);
const jobDetail = ref(null);
const loadingDetail = ref(false);

const filteredPostings = computed(() =>
  postings.value.filter(p =>
    p.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
    (p.created_by && p.created_by.toLowerCase().includes(searchQuery.value.toLowerCase())) ||
    p.description.toLowerCase().includes(searchQuery.value.toLowerCase())
        )
);

const fetchJobPostings = async () => {
  loading.value = true;
  try {
    const response = await candidateApi.getOpenJobs();
    postings.value = response.results;
  } catch (error) {
    ElMessage.error('获取职位列表失败');
    console.error(error);
  } finally {
    loading.value = false;
  }
};

const viewDetails = async (id) => {
  loadingDetail.value = true;
  detailDialogVisible.value = true;
  
  try {
    const response = await candidateApi.getJobDetail(id);
    jobDetail.value = response;
  } catch (error) {
    console.error('获取职位详情失败:', error);
    ElMessage.error('获取职位详情失败');
    detailDialogVisible.value = false;
  } finally {
    loadingDetail.value = false;
  }
};

const showApplyDialog = (job) => {
  selectedJob.value = job;
  applyForm.value = {
    resumeFile: null
  };
  fileList.value = [];
  detailDialogVisible.value = false; // 关闭详情弹窗
  applyDialogVisible.value = true;
};

const handleFileChange = (file) => {
  applyForm.value.resumeFile = file.raw;
};

const beforeUpload = (file) => {
  const isPDF = file.type === 'application/pdf';
  const isLt10M = file.size / 1024 / 1024 < 10;

  if (!isPDF) {
    ElMessage.error('只能上传PDF文件!');
    return false;
  }
  if (!isLt10M) {
    ElMessage.error('文件大小不能超过10MB!');
    return false;
  }
  return false; // 阻止自动上传
};

const submitApplication = async () => {
  if (!applyForm.value.resumeFile) {
    ElMessage.error('请选择简历文件');
    return;
  }

  // 检查是否已经申请过
  if (selectedJob.value.has_applied) {
    ElMessage.error('您已经申请过该职位');
    return;
  }

  // 文件验证
  const file = applyForm.value.resumeFile;
  console.log('上传文件信息:', {
    name: file.name,
    size: file.size,
    type: file.type,
    lastModified: file.lastModified
  });

  // 检查文件格式
  if (!file.name.toLowerCase().endsWith('.pdf')) {
    ElMessage.error('只支持PDF格式的简历文件');
    return;
  }

  // 检查文件大小 (10MB = 10 * 1024 * 1024 bytes)
  if (file.size > 10 * 1024 * 1024) {
    ElMessage.error('简历文件大小不能超过10MB');
    return;
  }

  submitting.value = true;
  try {
    const formData = new FormData();
    formData.append('resume_file', file);
    
    // 调试FormData内容
    console.log('FormData内容:');
    for (let [key, value] of formData.entries()) {
      console.log(`${key}:`, value);
    }

    // 第一步：上传简历文件
    const response = await candidateApi.applyForJob(selectedJob.value.id, formData);
    console.log('申请响应:', response);
    
    // 更新职位状态
    const jobIndex = postings.value.findIndex(job => job.id === selectedJob.value.id);
    if (jobIndex !== -1) {
      postings.value[jobIndex].has_applied = true;
    }
    
    // 如果返回了application_id，开始轮询等待简历分析完成
    if (response.application_id) {
      await waitForResumeAnalysis(response.application_id);
    } else {
      // 如果没有application_id，直接显示结果
      showApplicationResult(response);
    }
    
    applyDialogVisible.value = false;
    
  } catch (error) {
    console.error('投递简历失败:', error);
    console.error('错误详情:', error.response?.data);
    
    // 显示具体的错误信息
    if (error.response?.status === 400) {
      const errorData = error.response.data;
      if (typeof errorData === 'object' && errorData.error) {
        ElMessage.error(errorData.error);
      } else if (typeof errorData === 'string') {
        ElMessage.error(errorData);
      } else {
        ElMessage.error('请求参数错误，请检查文件格式和大小');
      }
    } else if (error.response?.status === 401) {
      ElMessage.error('请先登录');
    } else if (error.response?.status === 403) {
      ElMessage.error('权限不足');
    } else if (error.response?.status === 404) {
      ElMessage.error('职位不存在或已关闭');
    } else {
      ElMessage.error('投递简历失败，请重试');
    }
  } finally {
    submitting.value = false;
  }
};

// 等待简历分析完成的函数
const waitForResumeAnalysis = async (applicationId) => {
  const maxAttempts = 30; // 最多等待30次（30秒）
  const pollInterval = 1000; // 每秒轮询一次
  let attempts = 0;
  
  // 显示进度对话框
  progressDialogVisible.value = true;
  progressPercent.value = 0;
  progressText.value = '正在分析简历...';
  
  try {
    while (attempts < maxAttempts) {
      attempts++;
      // 计算进度：前90%用于等待，后10%用于完成
      const waitProgress = (attempts / maxAttempts) * 90;
      progressPercent.value = Math.min(waitProgress, 90);
      
      // 轮询申请状态
      const statusResponse = await candidateApi.getApplicationStatus(applicationId);
      console.log(`第${attempts}次轮询结果:`, statusResponse);
      
      // 检查是否分析完成
      if (statusResponse.status === 'screened_pass' || statusResponse.status === 'screened_fail') {
        progressPercent.value = 100;
        progressText.value = '分析完成！';
        
        // 等待一秒显示完成状态
        await new Promise(resolve => setTimeout(resolve, 1000));
        
        // 显示最终结果
        showApplicationResult(statusResponse);
        break;
      } else if (statusResponse.status === 'processing' || statusResponse.status === 'pending') {
        const remainingTime = maxAttempts - attempts;
        progressText.value = `正在分析简历... 预计还需 ${remainingTime} 秒`;
        await new Promise(resolve => setTimeout(resolve, pollInterval));
      } else {
        // 其他状态，直接显示结果
        showApplicationResult(statusResponse);
        break;
      }
    }
    
    // 如果超时
    if (attempts >= maxAttempts) {
      progressText.value = '分析时间较长，正在获取结果...';
      progressPercent.value = 95;
      
      // 尝试获取最新状态
      try {
        const finalStatus = await candidateApi.getApplicationStatus(applicationId);
        progressPercent.value = 100;
        progressText.value = '分析完成！';
        await new Promise(resolve => setTimeout(resolve, 1000));
        showApplicationResult(finalStatus);
      } catch (error) {
        console.error('获取最终状态失败:', error);
        ElMessage.warning('简历分析仍在进行中，请稍后查看结果');
      }
    }
    
  } catch (error) {
    console.error('轮询简历分析状态失败:', error);
    ElMessage.error('获取分析结果失败，请稍后查看');
  } finally {
    progressDialogVisible.value = false;
  }
};

// 显示申请结果
const showApplicationResult = (result) => {
  if (result.status === 'screened_pass') {
    // 筛选通过
    ElMessage({
      type: 'success',
      duration: 0,
      showClose: true,
      dangerouslyUseHTMLString: true,
      message: `
        <div>
          <h4>🎉 简历筛选通过！</h4>
          <p>匹配度: <strong>${result.match_score}%</strong> (要求: ${result.required_match_score}%)</p>
          <p>核心技能匹配: ${(result.core_skills_matched || []).join(', ')}</p>
          <p>软技能检测: ${(result.soft_skills_detected || []).join(', ')}</p>
          <p>面试推荐: ${getRecommendationText(result.interview_recommendation)}</p>
        </div>
      `
    });
    
    // 3秒后跳转到我的申请页面
    setTimeout(() => {
      router.push('/candidate/my-interviews');
    }, 3000);
    
  } else if (result.status === 'screened_fail') {
    // 筛选未通过，显示详细反馈
    showScreeningFeedback(result);
  } else {
    // 其他状态
    ElMessage.success(result.message || '简历投递成功！');
  }
};

// 获取推荐文本
const getRecommendationText = (recommendation) => {
  const textMap = {
    'recommended': '强烈推荐',
    'conditional': '有条件推荐', 
    'not_recommended': '暂不推荐'
  };
  return textMap[recommendation] || '待评估';
};

// 进度对话框相关
const progressDialogVisible = ref(false);
const progressPercent = ref(0);
const progressText = ref('正在分析简历...');

// 显示筛选反馈对话框
const screeningFeedbackVisible = ref(false);
const screeningResult = ref(null);

const showScreeningFeedback = (result) => {
  screeningResult.value = result;
  screeningFeedbackVisible.value = true;
};

const truncate = (text, length) => {
  if (text.length <= length) {
    return text;
  }
  return text.substring(0, length) + '...';
};

// 获取雇佣类型显示文本
const getEmploymentTypeText = (type) => {
  const typeMap = {
    'full_time': '全职',
    'part_time': '兼职', 
    'internship': '实习',
    'contract': '合同工',
    'remote': '远程'
  };
  return typeMap[type] || '未知类型';
};

// 获取雇佣类型颜色
const getEmploymentTypeColor = (type) => {
  const colorMap = {
    'full_time': 'success',
    'part_time': 'warning',
    'internship': 'primary',
    'contract': 'info',
    'remote': 'success'
  };
  return colorMap[type] || '';
};

// 获取技能预览（只显示前3个）
const getSkillsPreview = (skillsText) => {
  if (!skillsText) return [];
  const skills = skillsText.split(/[,，、]/).map(s => s.trim()).filter(s => s);
  return skills.slice(0, 3);
};

// 获取分数颜色
const getScoreColor = (percentage) => {
  if (percentage >= 80) return '#67c23a';
  if (percentage >= 60) return '#e6a23c';
  return '#f56c6c';
};

// 跳转到我的申请页面
const goToMyApplications = () => {
  screeningFeedbackVisible.value = false;
  router.push('/candidate/my-interviews');
};

onMounted(fetchJobPostings);
</script>

<style scoped>
.search-interviews-container {
  padding: 2rem;
}
.header {
  text-align: center;
  margin-bottom: 2rem;
}
.search-bar {
  display: flex;
  max-width: 600px;
  margin: 0 auto 2rem auto;
  gap: 1rem;
}
.postings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}
.posting-card {
  transition: transform 0.2s, box-shadow 0.2s;
}
.posting-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.posting-title {
  font-weight: bold;
}

/* 新的职位元信息样式 */
.job-meta {
  margin-bottom: 1rem;
}

.meta-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  color: #606266;
  font-size: 14px;
}

.meta-row:last-child {
  margin-bottom: 0;
}

.salary {
  margin-left: auto;
  color: #E6A23C;
  font-weight: 600;
}

.description {
  color: #909399;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.requirements-preview {
  margin-bottom: 1rem;
}

.requirement-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  color: #606266;
  font-size: 13px;
}

.requirement-item:last-child {
  margin-bottom: 0;
}

.skills-preview {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* 进度对话框样式 */
.progress-content {
  text-align: center;
  padding: 20px 0;
}

.progress-text {
  margin: 15px 0 10px;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.progress-tip {
  margin: 0;
  font-size: 14px;
  color: #909399;
}

/* 筛选反馈对话框样式 */
.screening-feedback {
  max-height: 70vh;
  overflow-y: auto;
}

.result-header {
  margin-bottom: 20px;
}

.feedback-sections {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.feedback-section h4 {
  margin: 0 0 12px 0;
  color: #303133;
  font-size: 16px;
}

.feedback-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feedback-item {
  padding: 16px;
  background: #f5f7fa;
  border-radius: 8px;
  border-left: 4px solid #409eff;
}

.feedback-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.dimension {
  font-weight: 600;
  color: #303133;
}

.score {
  color: #409eff;
  font-weight: 600;
}

.feedback-comment {
  color: #606266;
  font-size: 14px;
  margin-bottom: 12px;
  line-height: 1.5;
}

.suggestions-list {
  margin: 0;
  padding-left: 20px;
}

.suggestions-list li {
  margin-bottom: 8px;
  color: #606266;
  line-height: 1.5;
}

.skills-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #909399;
  font-size: 12px;
}

.footer-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.apply-form {
  padding: 20px 0;
}

.job-info {
  margin-bottom: 20px;
  padding: 16px;
  background: #f5f7fa;
  border-radius: 8px;
}

.job-info h4 {
  margin: 0 0 8px 0;
  color: #303133;
}

.job-info p {
  margin: 0;
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
}

.match-score-display {
  display: flex;
  align-items: center;
  gap: 8px;
}

.score-value {
  font-size: 16px;
  font-weight: 600;
  color: #409eff;
}

.score-desc {
  font-size: 12px;
  color: #909399;
}

/* 详情弹窗样式 */
.detail-loading {
  padding: 20px;
}

.job-detail {
  max-height: 500px;
  overflow-y: auto;
}

.detail-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ebeef5;
}

.detail-header h2 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 20px;
}

.detail-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #606266;
}

.company-name {
  font-weight: 500;
}

.apply-count {
  color: #909399;
}

.detail-content .section {
  margin-bottom: 24px;
}

.detail-content h3 {
  margin: 0 0 12px 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}

.description {
  line-height: 1.6;
  color: #606266;
  white-space: pre-wrap;
}

.interview-template {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
}

.template-header {
  margin-bottom: 16px;
}

.template-header h4 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 14px;
}

.template-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #909399;
}

.stages {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stage-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: white;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
}

.stage-number {
  width: 24px;
  height: 24px;
  background: #409eff;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.stage-content {
  flex: 1;
}

.stage-content h5 {
  margin: 0 0 4px 0;
  color: #303133;
  font-size: 14px;
  font-weight: 500;
}

.stage-content p {
  margin: 0 0 8px 0;
  color: #606266;
  font-size: 13px;
  line-height: 1.4;
}

.question-count {
  font-size: 12px;
  color: #909399;
}
.loading-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}
</style> 